<!DOCTYPE html>
<html lang="en-us"><head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'><meta name='description' content='题目一：迷宫 制作网页实现下图中的迷宫：
  img 
需求规格   UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
  正常赢：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win”
  碰墙输：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose”
  重置结果：离开迷宫，墙恢复正常；从S开始时，隐藏结果显示
  发现作弊：如果用户未经过S，就指到E，又或者指向S之后，从迷宫外绕路指向E，显示&amp;quot;Don&amp;rsquo;t cheat, you should start form the &amp;lsquo;S&amp;rsquo; and move to the &amp;lsquo;E&amp;rsquo; inside the maze!&amp;quot;
迷宫实现网页   题目二：打地鼠 制作网页实现下图中的简版的打地鼠：
  img 
需求规格   UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
  打地鼠：能够随机出现地鼠，鼠标能够击中（点击正确，地鼠消失，出现新地鼠；点击错误，地鼠不消失）
  正确计分：正确计算分数并显示，包括正确结束游戏
打地鼠实现网页   '><title>Two Game by JavaScript</title>
    
    <link rel='canonical' href='https://hungyam.gitee.io/code/p/two-game-by-javascript/'>

<link rel="stylesheet" href="/code/scss/style.min.css"><meta property='og:title' content='Two Game by JavaScript'>
<meta property='og:description' content='题目一：迷宫 制作网页实现下图中的迷宫：
  img 
需求规格   UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
  正常赢：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win”
  碰墙输：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose”
  重置结果：离开迷宫，墙恢复正常；从S开始时，隐藏结果显示
  发现作弊：如果用户未经过S，就指到E，又或者指向S之后，从迷宫外绕路指向E，显示&amp;quot;Don&amp;rsquo;t cheat, you should start form the &amp;lsquo;S&amp;rsquo; and move to the &amp;lsquo;E&amp;rsquo; inside the maze!&amp;quot;
迷宫实现网页   题目二：打地鼠 制作网页实现下图中的简版的打地鼠：
  img 
需求规格   UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
  打地鼠：能够随机出现地鼠，鼠标能够击中（点击正确，地鼠消失，出现新地鼠；点击错误，地鼠不消失）
  正确计分：正确计算分数并显示，包括正确结束游戏
打地鼠实现网页   '>
<meta property='og:url' content='https://hungyam.gitee.io/code/p/two-game-by-javascript/'>
<meta property='og:site_name' content='Hungyam'>
<meta property='og:type' content='article'><meta property='article:section' content='Post' /><meta property='article:published_time' content='2020-10-27T00:00:00&#43;00:00'/><meta property='article:modified_time' content='2020-10-27T00:00:00&#43;00:00'/><meta property='og:image' content='https://hungyam.gitee.io/code/p/two-game-by-javascript/2.jpg' />
<meta name="twitter:title" content="Two Game by JavaScript">
<meta name="twitter:description" content="题目一：迷宫 制作网页实现下图中的迷宫：
  img 
需求规格   UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
  正常赢：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win”
  碰墙输：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose”
  重置结果：离开迷宫，墙恢复正常；从S开始时，隐藏结果显示
  发现作弊：如果用户未经过S，就指到E，又或者指向S之后，从迷宫外绕路指向E，显示&amp;quot;Don&amp;rsquo;t cheat, you should start form the &amp;lsquo;S&amp;rsquo; and move to the &amp;lsquo;E&amp;rsquo; inside the maze!&amp;quot;
迷宫实现网页   题目二：打地鼠 制作网页实现下图中的简版的打地鼠：
  img 
需求规格   UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。
  打地鼠：能够随机出现地鼠，鼠标能够击中（点击正确，地鼠消失，出现新地鼠；点击错误，地鼠不消失）
  正确计分：正确计算分数并显示，包括正确结束游戏
打地鼠实现网页   "><meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:image" content='https://hungyam.gitee.io/code/p/two-game-by-javascript/2.jpg' /></head><body class="">
        <div class="container flex on-phone--column align-items--flex-start extended article-page with-toolbar">
            <aside class="sidebar left-sidebar sticky">
    <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>

    <header class="site-info">
        
            <figure class="site-avatar">
                

                
                    
                    <img src="/code/img/avatar_hu271a79c54c9badde22d864b5ad68a303_161614_300x300_resize_q75_box.jpg" width="300"
                        height="300" class="site-logo" loading="lazy" alt="Avatar">
                

                <span class="emoji">🐤</span>
            </figure>
        
        <h1 class="site-name"><a href="https://hungyam.gitee.io/code">Hungyam</a></h1>
        <h2 class="site-description">Programming enthusiast</h2>
    </header>

    <ol class="menu" id="main-menu">
        
        
        

        <li >
            <a href='https://hungyam.gitee.io/code/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="5 12 3 12 12 3 21 12 19 12" />
  <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
  <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>



                
                <span>Home</span>
            </a>
        </li>
        
        

        <li >
            <a href='https://hungyam.gitee.io/code/about'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="7" r="4" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>



                
                <span>About me</span>
            </a>
        </li>
        
        

        <li >
            <a href='https://hungyam.gitee.io/code/archives'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-archive" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <rect x="3" y="4" width="18" height="4" rx="2" />
  <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
  <line x1="10" y1="12" x2="14" y2="12" />
</svg>



                
                <span>Archives</span>
            </a>
        </li>
        
    </ol>
</aside>
            <main class="main full-width">
    <div id="article-toolbar">
        <a href="https://hungyam.gitee.io/code" class="back-home">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="15 6 9 12 15 18" />
</svg>



            <span>Back</span>
        </a>
    </div>

    <article class="has-image main-article">
    <header class="article-header">
        <div class="article-image">
            <img srcset="/code/p/two-game-by-javascript/2_hu958d513eeefe5556a31d065479ecc5ac_14205_1024x0_resize_q75_box.jpg 1024w, /code/p/two-game-by-javascript/2_hu958d513eeefe5556a31d065479ecc5ac_14205_2000x0_resize_q75_box.jpg 2000w"
                    src="/code/p/two-game-by-javascript/2_hu958d513eeefe5556a31d065479ecc5ac_14205_2000x0_resize_q75_box.jpg" width="1500" height="1000" loading="lazy"
                    alt="Featured image of post Two Game by JavaScript" />
            
        </div>
    

    <div class="article-details">
    
    <header class="article-category">
        
            <a href="https://hungyam.gitee.io/code/categories/javascript/" 
                    class="color-tag"
                    data-image="/code/p/two-game-by-javascript/2_hu958d513eeefe5556a31d065479ecc5ac_14205_20x20_fill_q75_box_smart1.jpg" 
                    data-key="" 
                    data-hash="md5-jq4GZk3fs&#43;jcbgAHVstwOw==">
                    JavaScript
                </a>
            
        
    </header>
    

    <h2 class="article-title">
        <a href="https://hungyam.gitee.io/code/p/two-game-by-javascript/">Two Game by JavaScript</a>
    </h2>

    <footer class="article-time">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <polyline points="12 7 12 12 15 15" />
</svg>



        <time class="article-time--published">2020 Oct 27</time>
    </footer></div>
</header>

    <section class="article-content">
    <h2 id="题目一迷宫">题目一：迷宫</h2>
<p>制作网页实现下图中的迷宫：</p>
<p><figure>
		<a href="/code/p/two-game-by-javascript/maze.png" data-size="934x632">
			<img srcset="/code/p/two-game-by-javascript/maze_hue30b6a56cbd40597c15ae4a26ff8e27d_52495_480x0_resize_box_2.png 480w, /code/p/two-game-by-javascript/maze_hue30b6a56cbd40597c15ae4a26ff8e27d_52495_1024x0_resize_box_2.png 1024w"
				src="/code/p/two-game-by-javascript/maze.png" width="934" height="632" loading="lazy"
				alt="img">
		</a>
		
		<figcaption>img</figcaption>
		
	</figure></p>
<h3 id="需求规格">需求规格</h3>
<ol>
<li>
<p>UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。</p>
</li>
<li>
<p>正常赢：移动鼠标，从S开始，到E结束，中间不碰墙，赢得游戏，显示“You Win”</p>
</li>
<li>
<p>碰墙输：从S开始后，到E结束之前，碰墙，墙变红，输，显示“You Lose”</p>
</li>
<li>
<p>重置结果：离开迷宫，墙恢复正常；从S开始时，隐藏结果显示</p>
</li>
<li>
<p>发现作弊：如果用户未经过S，就指到E，又或者指向S之后，从迷宫外绕路指向E，显示&quot;Don&rsquo;t cheat, you should start form the &lsquo;S&rsquo; and move to the &lsquo;E&rsquo; inside the maze!&quot;</p>
<h2 id="迷宫实现网页index1html"><a class="link" href="index1.html" >迷宫实现网页</a></h2>
</li>
</ol>
<h2 id="题目二打地鼠">题目二：打地鼠</h2>
<p>制作网页实现下图中的简版的打地鼠：</p>
<p><figure>
		<a href="/code/p/two-game-by-javascript/mole.png" data-size="776x494">
			<img srcset="/code/p/two-game-by-javascript/mole_hu8537993c17ed334a65fa25316e9eeea9_55488_480x0_resize_box_2.png 480w, /code/p/two-game-by-javascript/mole_hu8537993c17ed334a65fa25316e9eeea9_55488_1024x0_resize_box_2.png 1024w"
				src="/code/p/two-game-by-javascript/mole.png" width="776" height="494" loading="lazy"
				alt="img">
		</a>
		
		<figcaption>img</figcaption>
		
	</figure></p>
<h3 id="需求规格-1">需求规格</h3>
<ol>
<li>
<p>UI：UI与上图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI。</p>
</li>
<li>
<p>打地鼠：能够随机出现地鼠，鼠标能够击中（点击正确，地鼠消失，出现新地鼠；点击错误，地鼠不消失）</p>
</li>
<li>
<p>正确计分：正确计算分数并显示，包括正确结束游戏</p>
<h2 id="打地鼠实现网页index2html"><a class="link" href="index2.html" >打地鼠实现网页</a></h2>
</li>
</ol>

</section>


    <footer class="article-footer">
    

    </footer>

    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
    integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
    crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.querySelector(`.article-content`));"></script>
    
</article>

    <aside class="related-contents--wrapper">
    
    
</aside>

    
        
    

    <footer class="site-footer">
    <section class="copyright">&copy; 2020 Hungyam</section>
    <section class="powerby">
        Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="1.0.5">Stack</a></b> designed by
        <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
    </section>
</footer>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="display:none">

    
    <div class="pswp__bg"></div>

    
    <div class="pswp__scroll-wrap">

        
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                
                
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
            </main>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"
    integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g=" crossorigin="anonymous"></script><script type="text/javascript" src="/code/ts/main.js" defer></script>
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>
<link rel="stylesheet" href="/code/css/highlight/light.min.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/code/css/highlight/dark.min.css" media="(prefers-color-scheme: dark)">

    </body>
</html>
